// 路由组件
// 先引入公用的依赖
import React, { Component, Suspense } from 'react'
// Suspense:悬念 fallback 后备

// 路由组件
import { Switch, Route, Redirect, withRouter } from 'react-router-dom'

// 要展示的自己的组件
// import ComA from '../components/ComA'
// import ComBig from '../components/ComBig'
// import Fetch from '../components/Fetch'
// import Fome from '../components/Fome'
// import NotFound from '../components/NotFound'
// import Index1 from '../components/Index'
// import Arg from '../components/Arg'
// import XjjList from '../components/XjjList'
// import Detail from '../components/Detail'
// import Layout from '../components/Layout'
// import Login from '../components/Login'

// 改为懒加载的方式
const ComA = React.lazy(()=>import('../components/ComA'))
const ComBig = React.lazy(()=>import('../components/ComBig'))
const Fetch = React.lazy(()=>import('../components/Fetch'))
const Fome = React.lazy(()=>import('../components/Fome'))
const NotFound = React.lazy(()=>import('../components/NotFound'))
const Arg = React.lazy(()=>import('../components/Arg'))
const XjjList = React.lazy(()=>import('../components/XjjList'))
const Detail = React.lazy(()=>import('../components/Detail'))
const Layout = React.lazy(()=>import('../components/Layout'))
const Login = React.lazy(()=>import('../components/Login'))

export default class Index extends Component {
  constructor() {
    super();
    this.state = {
      // 路由表
      routes: [
        { path: '/layout', component: Layout, needLogin: true, title: '嵌套路由' },
        { path: '/xjjlist', component: XjjList, needLogin: true, title: '小姐姐列表' },
        { path: '/detail/:id', component: Detail, needLogin: true, title: '歌曲详情' },
        { path: '/login', component: Login, needLogin: false, title: 'Login' }
      ]
    }
  }
  render() {
    return (
      <>
        {/* 需求：layout、xjjlist、detail三个页面必须登录，否则不能查看 */}
        <Switch>
          {/* exact:精确匹配 当组件的path是/时 需要添加这个属性，避免其他页面无法展示 */}
          {/* 路由的匹配方式：从上到下 从左到右 匹配成功后就不再继续匹配了 */}
          {/* <Route path="/" exact component={Index1}></Route> */}
          <Route path="/" exact render={() => {
            document.title = "首页"
            return <Index1></Index1>
          }}></Route>
          <Route path="/coma" component={ComA}></Route>
          <Route path="/combig" component={ComBig}></Route>
          <Route path="/fetch" component={Fetch}></Route>
          <Route path="/fome" component={Fome}></Route>
          <Route path="/arg" component={Arg}></Route>
          {/* 父路由不要加exact，否则就不能正常展示了 */}
          {/* <Route path="/layout" component={Layout}></Route> */}
          {/* <Route path="/xjjlist" component={XjjList}></Route> */}
          {/* <Route path="/xjjlist" render={() => {
            if (localStorage.getItem('isLogin')) {
              // 登陆成功
              return <XjjList></XjjList>
            } else {
              // 没有登陆，就去登陆
              return <Redirect to="/login"></Redirect>
            }
          }}></Route> */}
          {/* <Route path="/detail/:id" component={Detail}></Route> */}
          {/* ========= 以下是循环生成的路由 =========== */}
          {
            this.state.routes.map((item, index) => {
              return (
                <Route key={index} path={item.path} render={() => {
                  document.title = item.title || 'react-练习';
                  if (item.needLogin) { // 组件需要登陆验证
                    if (localStorage.getItem('isLogin')) { // 判断用户是否登陆
                      // 组件需要登陆，用户已登陆
                      // item.component就是要渲染的组件
                      let Com = item.component
                      // 转换为路由组件
                      let Com1 = withRouter(Com)
                      return <Com1></Com1>
                    } else {
                      // 组件需要登陆，用户没有登陆
                      return <Redirect to="/login"></Redirect>
                    }
                  } else {
                    // 组件不需要登陆，直接展示
                    // item.component就是要渲染的组件
                    let Com = item.component
                    // 转换为路由组件
                    let Com1 = withRouter(Com)
                    return <Com1></Com1>
                  }
                }}></Route>
              )
            })
          }
          {/* path="*" 可以省略，表示匹配所有地址。放在最后！ */}
          {/* <Route component={NotFound}></Route> */}
          {/* ========== 404的两种处理方式 ========== */}
          <Route path="/404" component={NotFound}></Route>
          {/* Redirect 重定向 to表示修改后的地址 */}
          <Redirect to="/404"></Redirect>
        </Switch>
      </>
    )
  }
}
